<template>
	<view class="container">
		<view class="form-section">

			<up-form class="form-container" :model="recordInfo" :rules="rules" ref="formRef">
				<view class="form-title">运行记录填报</view>
				<up-form-item label="日期" prop="rq" :required="isEditMode" label-width="60px" labelAlign="center">
					<up-input v-model="recordInfo.rq" placeholder="右侧选择运行日期" readonly border="bottom">
						<template #suffix>
							<u-icon name="calendar" size="30px" @click="showDatePicker('rq')"></u-icon>
						</template>
					</up-input>
				</up-form-item>

				<up-form-item label="班次" prop="bc" :required="isEditMode" label-width="60px" labelAlign="center">
					<up-input v-model="recordInfo.bc" placeholder="请输入班次" border="bottom"></up-input>
				</up-form-item>

				<up-form-item label="操作人" prop="operator" required label-width="60px" labelAlign="center">
					<up-input v-model="recordInfo.operator" placeholder="请输入操作人" border="bottom"></up-input>
				</up-form-item>

				<view class="form-textarea-item">
					<text class="form-label">班前检查记录</text>
					<u-textarea class="custom-textarea" v-model="recordInfo.bqjljl" placeholder="请输入班前检查记录" height="100"
						border="surround" maxlength="200" count></u-textarea>
				</view>

				<up-form-item label="运行台时" prop="yxts" label-width="100px" labelAlign="center">
					<up-number-box v-model="recordInfo.yxts" min="0" :step="0.5" max="24" input-width="100"
						button-size="28" bgColor="#2979ff" iconStyle="color: #fff">
					</up-number-box>
				</up-form-item>

				<up-form-item label="故障停机台时" prop="gztjts" label-width="100px" labelAlign="center">
					<up-number-box v-model="recordInfo.gztjts" :min="0" :step="0.5" :max="24" input-width="100"
						button-size="28" bgColor="#2979ff" iconStyle="color: #fff">
					</up-number-box>
				</up-form-item>

				<up-form-item label="检修保养台时" prop="jxbyts" label-width="100px" labelAlign="center">
					<up-number-box v-model="recordInfo.jxbyts" :min="0" :step="0.5" :max="24" input-width="100"
						button-size="28" bgColor="#2979ff" iconStyle="color: #fff">
					</up-number-box>
				</up-form-item>

				<view class="form-textarea-item">
					<text class="form-label">负荷情况</text>
					<u-textarea class="custom-textarea" v-model="recordInfo.fhzk" placeholder="请输入负荷情况" height="60"
						border="surround" maxlength="200" count></u-textarea>
				</view>

				<view class="form-textarea-item">
					<text class="form-label">工作记录</text>
					<u-textarea class="custom-textarea" v-model="recordInfo.gzjl" placeholder="请输入工作记录" height="60"
						border="surround" maxlength="200" count></u-textarea>
				</view>

				<view class="form-textarea-item">
					<text class="form-label">检修保养记录</text>
					<u-textarea class="custom-textarea" v-model="recordInfo.jxbyjl" placeholder="请输入检修保养记录" height="100"
						border="surround" maxlength="200" count></u-textarea>
				</view>

				<view class="form-textarea-item">
					<text class="form-label">安全装置情况</text>
					<u-textarea class="custom-textarea" v-model="recordInfo.aqzzzk" placeholder="请输入安全装置情况" height="100"
						border="surround" maxlength="200" count></u-textarea>
				</view>

				<up-form-item label="交班人" label-width="60px" labelAlign="center">
					<up-input v-model="recordInfo.handover" placeholder="请输入交班人" border="bottom"></up-input>
				</up-form-item>

				<up-form-item label="接班人" prop="successor" label-width="60px" labelAlign="center">
					<up-input v-model="recordInfo.successor" placeholder="请输入接班人" border="bottom"></up-input>
				</up-form-item>

				<up-form-item label="班组长" prop="handover" label-width="60px" labelAlign="center">
					<up-input v-model="recordInfo.monitor" placeholder="请输入班组长" border="bottom"></up-input>
				</up-form-item>

				<view class="btn-group">
					<u-button type="primary" @click="handleSubmit" :loading="loading">提交</u-button>
					<u-button style="margin-left: 20rpx" @click="handleReset">重置</u-button>
				</view>

				<u-datetime-picker v-model="dateValue" :show="showPicker" mode="date" @confirm="handleDateConfirm"
					@cancel="showPicker = false"></u-datetime-picker>
			</up-form>
		</view>

	</view>
</template>

<script>
	import {
		deepClone,
		getUuid
	} from '../../../common/commonUnits';

	export default {
		data() {
			return {
				mode: '',
				deviceId: '',
				loading: false,
				showPicker: false,
				currentDateField: '',
				dateValue: 0,
				shiftOptions: [{
						label: '早班',
						value: '早班'
					},
					{
						label: '晚班',
						value: '晚班'
					},
				],
				recordInfo: {
					aqzzzk: '',
					bc: '',
					bqjljl: '',
					fhzk: '',
					gzjl: '',
					gztjts: 0,
					handover: '',
					id: '',
					jxbyjl: '',
					jxbyts: 0,
					monitor: '',
					operator: '',
					rq: '',
					sbid: '',
					successor: '',
					yxts: 0,
				},

				rules: {
					handover: [{
						required: true,
						message: '请输入班组长',
						trigger: ['blur', 'change']
					}],
					rq: [{
						required: true,
						message: '请选择运行日期',
						trigger: ['blur', 'change']
					}],
					bc: [{
						required: true,
						message: '请选择班次',
						trigger: ['blur', 'change']
					}],
					operator: [{
						required: true,
						message: '请输入操作人',
						trigger: ['blur', 'change']
					}],

				},

			};
		},
		computed: {
			isEditMode() {
				return true;
			},
		},
		onLoad(options) {
			this.mode = options.mode
			this.deviceId = options.id

			if (this.mode !== 'add') {
				this.recordInfo.id = options.id
				this.getData()
			}
		},
		methods: {
			getData() {
				this.$commonUnits.postRequest('sbby.ywglyxglyxrjbiz.getYwglYxglYxrj.mobile',
					JSON.stringify({
						ywglyxglyxrj: this.recordInfo
					})).then(res => {
					if (!res.ywglyxglyxrj) {
						uni.showToast({
							title: '查询错误，请重试',
							icon: 'none'
						});
					} else {
						const data = res.ywglyxglyxrj;
						data.yxts = Number(data.yxts) || 0;
						data.gztjts = Number(data.gztjts) || 0;
						data.jxbyts = Number(data.jxbyts) || 0;
						this.recordInfo = data
					}
				})
			},
			showDatePicker(field) {
				this.currentDateField = field
				this.dateValue = this.recordInfo[field] ? new Date(this.recordInfo[field]).getTime() : Date.now()
				this.showPicker = true
			},
			handleDateConfirm(e) {
				const date = new Date(e.value)
				const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString()
				.padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
				this.recordInfo[this.currentDateField] = formattedDate
				this.showPicker = false
			},

			async handleSubmit() {
				try {
					// debugger
					const isvalidate = await this.$refs.formRef.validate()
					if (!isvalidate) {
						uni.showToast({
							title: '页面校验未通过',
							icon: 'none'
						})
						return
					}
					this.loading = true
					const apiMethod =
						this.mode === 'add' ?
						'sbby.ywglyxglyxrjbiz.addYwglYxglYxrj.mobile' :
						'sbby.ywglyxglyxrjbiz.updateYwglYxglYxrj.mobile'

					if (this.mode == "add") {
						this.recordInfo.id = getUuid()
						this.recordInfo.sbid = this.deviceId
					}
					const res = await this.$commonUnits.postRequest(
						apiMethod,
						JSON.stringify({
							ywglyxglyxrj: this.recordInfo,
						})
					)

					// 3. 检查运行记录是否提交成功
					if (res.code === "1" && res.msg === "操作成功！") {
						try {
							const ywglyxglyxrj = deepClone(this.recordInfo)
							let data = JSON.stringify(ywglyxglyxrj)

							const tsRes = await this.$commonUnits.postRequest(
								'sbby.sbyxrj.insertOrUpdateSbts.mobile',
								JSON.stringify({
									ywglyxglyxrj: ywglyxglyxrj
								})
							)
							if (tsRes) {
								uni.showToast({
									title: '操作成功',
									icon: 'success',
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							} else {
								uni.showToast({
									title: '台时更新失败',
									icon: 'none',
								})
							}
						} catch (tsError) {
							console.error('台时更新失败')
						}
					} else {
						uni.showToast({
							title: '操作失败',
							icon: 'none',
						})
					}

				} catch (error) {
					console.log(error)
				} finally {
					this.loading = false
				}
			},

			handleReset() {
				if (this.mode === 'add') {
					this.$refs.formRef.resetFields()
				} else {
					this.getData()
				}
				uni.showToast({
					title: '重置成功',
					icon: 'success',
				})
			},

		}
	};
</script>

<style scoped>
	.form-section {
		padding: 20rpx;
	}

	.form-container {
		padding: 20rpx;
		background-color: #fff;
	}

	.form-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 20rpx;
		border-left: 4rpx solid #1890ff;
		padding-left: 12rpx;
	}

	.btn-group {
		display: flex;
		margin-top: 40rpx;
		padding: 0 20rpx;
	}

	.up-form-item {
		margin-bottom: 20rpx;
	}

	.u-form-item__body__left {}

	/* 文本域项目样式 */
	.form-textarea-item {
		margin-bottom: 30rpx;
	}

	.form-textarea-item .form-label {
		display: block;
		font-size: 28rpx;
		color: #606266;
		margin-bottom: 10rpx;
	}

	.custom-textarea {
		border-radius: 8rpx;
		padding: 16rpx;
		background-color: #fafafa;
	}
</style>